<template>
    <div class="color-picker">
      <button 
        v-for="color in colors"
        :key="color"
        :style="{ backgroundColor: color }"
        @click="$emit('change', color)"
      ></button>
    </div>
  </template>
  
  <script setup>
  const colors = [
    '#000000', '#ff0000', '#00ff00', 
    '#0000ff', '#ffff00', '#ff00ff'
  ]
  </script>
  
  <style scoped>
  .color-picker {
    display: flex;
    gap: 5px;
  }
  
  button {
    width: 25px;
    height: 25px;
    border: 1px solid #ddd;
    cursor: pointer;
    border-radius: 3px;
  }
  </style>